@import "[default].parameters.css";

:root {
    --size-12px: 0.75rem;
    --size-14px: 0.875rem;
    --size-16px: 1rem;
    --size-18px: 1.125rem;
    --size-20px: 1.25rem;
    --size-22px: 1.375rem;
    --size-24px: 1.5rem;
    --size-28px: 1.75rem;
    --size-30px: 1.875rem;
    --size-32px: 2rem;
    --size-34px: 2.125rem;
    --size-36px: 2.25rem;
    --size-40px: 2.5rem;
    --size-48px: 3rem;
    --size-56px: 3.5rem;
    --size-60px: 3.75rem;
    --size-64px: 4rem;
    --size-68px: 4.25rem;
    --size-80px: 5rem;
    /* Additional sizes */
    --size-1px: 0.063rem;
    --size-15px: 0.938rem;
    /* Font weight */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    /* Font family */
    --font-family-inter: "Inter";
    --font-family-cerapro: "CeraPro";
    --font-family-font-awesome: "Font Awesome 6 Pro";
    --font-family-body: var(--font-family-inter);
    --font-family-headings: var(--font-family-cerapro);
    /* Texts */
    --text-body-mini: var(--size-12px);
    --text-body-small: var(--size-14px);
    --text-body-base: var(--size-16px);
    --text-body-large: var(--size-18px);
    --text-body-huge: var(--size-20px);
    /* Headings */
    --text-heading-1: var(--size-48px);
    --text-heading-2: var(--size-40px);
    --text-heading-3: var(--size-32px);
    --text-heading-4: var(--size-28px);
    --text-heading-5: var(--size-24px);
    --text-heading-6: var(--size-20px);
    --margin-heading-1: calc(var(--text-heading-1) * 0.5);
    --margin-heading-3: calc(var(--text-heading-3) * 0.5);
    --margin-heading-2: calc(var(--text-heading-2) * 0.5);
    --margin-heading-4: calc(var(--text-heading-4) * 0.5);
    --margin-heading-5: calc(var(--text-heading-5) * 0.5);
    --margin-heading-6: calc(var(--text-heading-6) * 0.5);
    /* Line height */
    --font-line-height-mini: var(--size-20px);
    --font-line-height-small: var(--size-20px);
    --font-line-height-base: var(--size-24px);
    --font-line-height-large: var(--size-28px);
    --font-line-height-huge: var(--size-32px);
    --font-line-height-heading-1: var(--size-56px);
    --font-line-height-heading-2: var(--size-48px);
    --font-line-height-heading-3: var(--size-40px);
    --font-line-height-heading-4: var(--size-36px);
    --font-line-height-heading-5: var(--size-30px);
    --font-line-height-heading-6: var(--size-28px);
    --font-line-height-quote: 2.5rem;
    /* Letter spacing */
    --font-letter-spacing-heading: -0.031rem; /*CHECK (docs: -0.5)*/
    /* Text decoration */
    --text-underline-offset-default: 0.03rem;
    --text-underline-offset-dotted: 0.07rem;
    --text-underline-offset-fw-medium: 0.1rem;
}


@media screen and (min-width: 992px) {
    :root {
        /* Texts */
        --text-body-huge: var(--size-22px);
        /* Headings */
        --text-heading-1: var(--size-60px);
        --text-heading-2: var(--size-40px);
        --text-heading-3: var(--size-32px);
        --text-heading-4: var(--size-28px);
        --text-heading-5: var(--size-24px);
        --text-heading-6: var(--size-20px);
        --margin-heading-1: calc(var(--text-heading-1) * 0.5);
        --margin-heading-3: calc(var(--text-heading-3) * 0.5);
        --margin-heading-2: calc(var(--text-heading-2) * 0.5);
        --margin-heading-4: calc(var(--text-heading-4) * 0.5);
        --margin-heading-5: calc(var(--text-heading-5) * 0.5);
        --margin-heading-6: calc(var(--text-heading-6) * 0.5);
        /* Line height */
        --font-line-height-mini: var(--size-20px);
        --font-line-height-small: var(--size-20px);
        --font-line-height-base: var(--size-24px);
        --font-line-height-large: var(--size-28px);
        --font-line-height-huge: var(--size-32px);
        --font-line-height-heading-1: var(--size-68px);
        --font-line-height-heading-2: var(--size-48px);
        --font-line-height-heading-3: var(--size-40px);
        --font-line-height-heading-4: var(--size-36px);
        --font-line-height-heading-5: var(--size-30px);
        --font-line-height-heading-6: var(--size-28px);
    }
}

body {
    font-family: var(--font-family-body), sans-serif;
    font-size: var(--text-body-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--font-line-height-base);
    color: var(--color-text-base);
    background-color: var(--color-background-default);
}

b, strong {
    font-weight: var(--font-weight-black);
}

em {
    font-style: italic !important;
}

u, .text-decoration-underline {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--color-text-base);
    text-underline-offset: var(--text-underline-offset-default);
    text-underline-position: from-font;
}

.fs-mini, .fs-mini p {
    font-size: var(--text-body-mini);
    line-height: var(--font-line-height-mini);
}

.fs-small, .fs-small p {
    font-size: var(--text-body-small);
    line-height: var(--font-line-height-small);
}

.fs-base, .fs-base p {
    font-size: var(--text-body-base);
    line-height: var(--font-line-height-base);
}

.fs-large, .fs-large p {
    font-size: var(--text-body-large);
    line-height: var(--font-line-height-large);
}

.fs-huge, .fs-huge p {
    font-size: var(--text-body-huge);
    line-height: var(--font-line-height-huge);
}

    .fs-huge.fst-italic, .fs-huge.fst-italic p,
    .fs-huge .fst-italic, .fs-huge .fst-italic p,
    .fs-huge em {
        font-weight: var(--font-weight-light) !important;
        font-style: italic !important;
    }

.fw-black, .fw-black p {
    font-weight: var(--font-weight-black) !important;
}

.text-mono {
    font-family: var(--font-family-inter);
    font-feature-settings: 'ss03' on, "tnum" on;
}

.text-brand, .text-brand p {
    color: var(--color-text-brand) !important;
    text-decoration-color: var(--color-text-brand) !important;
}

.text-accent, .text-accent p {
    color: var(--color-text-accent) !important;
    text-decoration-color: var(--color-text-accent) !important;
}

.text-inverse, .text-inverse p {
    color: var(--color-text-inverse) !important;
    text-decoration-color: var(--color-text-inverse) !important;
}

.text-disabled, .text-disabled p {
    color: var(--color-text-disabled) !important;
    text-decoration-color: var(--color-text-disabled) !important;
}

.text-base, .text-base p {
    color: var(--color-text-base) !important;
    text-decoration-color: var(--color-text-base) !important;
}

.bg-brand {
    background-color: var(--color-brand-primary);
}

.bg-subtle {
    background-color: var(--color-background-subtle);
}

.bg-surface-a {
    background-color: var(--color-background-surface-a);
}

.bg-surface-b {
    background-color: var(--color-background-surface-b);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-headings), sans-serif;
    color: var(--color-text-base);
    letter-spacing: var(--font-letter-spacing-heading);
    margin: 0;
}

    h1 p,
    h2 p,
    h3 p,
    h4 p,
    h5 p,
    h6 p {
        margin: 0;
    }

.display-1 {
    font-family: var(--font-family-headings), sans-serif;
    letter-spacing: var(--font-letter-spacing-heading);
    font-size: var(--text-heading-1);
    line-height: var(--font-line-height-heading-1);
    margin-bottom: var(--margin-heading-1);
}

.display-2 {
    font-family: var(--font-family-headings), sans-serif;
    letter-spacing: var(--font-letter-spacing-heading);
    font-size: var(--text-heading-2);
    line-height: var(--font-line-height-heading-2);
    margin-bottom: var(--margin-heading-2);
}

.display-3 {
    font-family: var(--font-family-headings), sans-serif;
    letter-spacing: var(--font-letter-spacing-heading);
    font-size: var(--text-heading-3);
    line-height: var(--font-line-height-heading-3);
    margin-bottom: var(--margin-heading-3);
}

.display-4 {
    font-family: var(--font-family-headings), sans-serif;
    letter-spacing: var(--font-letter-spacing-heading);
    font-size: var(--text-heading-4);
    line-height: var(--font-line-height-heading-4);
    margin-bottom: var(--margin-heading-4);
}

.display-5 {
    font-family: var(--font-family-headings), sans-serif;
    letter-spacing: var(--font-letter-spacing-heading);
    font-size: var(--text-heading-5);
    line-height: var(--font-line-height-heading-5);
    margin-bottom: var(--margin-heading-5);
}

.display-6 {
    font-family: var(--font-family-headings), sans-serif;
    letter-spacing: var(--font-letter-spacing-heading);
    font-size: var(--text-heading-6);
    line-height: var(--font-line-height-heading-6);
    margin-bottom: var(--margin-heading-6);
}

a, button {
    color: var(--color-text-accent);
    background-color: transparent;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--color-text-accent);
    text-underline-offset: var(--text-underline-offset-default);
    text-underline-position: from-font;
    cursor: pointer !important;
    border: none;
    text-align: start;
    padding: 0;
}
    /* immagini e video? */
    a[href$=".pdf"]::before {
        content: "\f1c1"; /* fa-regular fa-file-pdf */
        font-family: var(--font-family-font-awesome);
        margin-right: var(--display-stacks-xs);
    }

    a[href$=".xls"]::before, a[href$=".xlsx"]::before {
        content: "\f1c3"; /* fa-regular fa-file-excel */
        font-family: var(--font-family-font-awesome);
        margin-right: var(--display-stacks-xs);
    }

    a[href$=".doc"]::before, a[href$=".docx"]::before {
        content: "\f1c2"; /* fa-regular fa-file-word */
        font-family: var(--font-family-font-awesome);
        margin-right: var(--display-stacks-xs);
    }

    a[href$=".zip"]::before, a[href$=".rar"]::before, a[href$=".7z"]::before {
        content: "\e5ee"; /* fa-regular fa-file-zip */
        font-family: var(--font-family-font-awesome);
        margin-right: var(--display-stacks-xs);
    }

    a[href$=".txt"]::before, a[href$=".ppt"]::before, a[href$=".pptx"]::before {
        content: "\f15b"; /* fa-regular fa-file */
        font-family: var(--font-family-font-awesome);
        margin-right: var(--display-stacks-xs);
    }

    a[target="_blank"]:not(a.no-automatic-target-blank-arrow)::after {
        content: "\e09f"; /* fa-solid fa-arrow-up-right */
        font-family: var(--font-family-font-awesome);
        margin-left: var(--display-stacks-xs);
    }

.a-black {
    font-weight: var(--font-weight-black);
    font-size: var(--text-heading-5);
    line-height: var(--font-line-height-heading-5);
    letter-spacing: var(--font-letter-spacing-heading);
    color: var(--color-text-base) !important;
    text-decoration-color: var(--color-text-base) !important;
}

/* Hover & Focus */
a:hover, a.hover,
a:focus, a.focus,
button:hover, button.hover,
button:focus, button.focus {
    color: var(--color-text-muted) !important;
    text-decoration-color: var(--color-text-muted) !important;
    border: none;
}

.a-black:hover, .a-black.hover,
.a-black:focus, .a-black.focus {
    color: var(--color-text-muted) !important;
    text-decoration-color: var(--color-text-muted) !important;
    border: none;
}

/* Disabled */
a.disabled, button.disabled {
    pointer-events: none;
    cursor: not-allowed;
    color: var(--color-text-disabled);
    text-decoration-color: var(--color-text-disabled);
}

@media screen and (min-width: 992px) {
    .fs-lg-large, .fs-lg-large p {
        font-size: var(--text-body-large);
        line-height: var(--font-line-height-large);
    }

    .fs-lg-huge, .fs-lg-huge p {
        font-size: var(--text-body-huge);
        line-height: var(--font-line-height-huge);
    }

    .fw-lg-light {
        font-weight: var(--font-weight-light) !important;
    }

    .text-lg-base, .text-lg-base p {
        color: var(--color-text-base) !important;
        text-decoration-color: var(--color-text-base) !important;
    }

    .display-lg-4 {
        font-family: var(--font-family-headings), sans-serif;
        letter-spacing: var(--font-letter-spacing-heading);
        font-size: var(--text-heading-4);
        line-height: var(--font-line-height-heading-4);
        margin-bottom: var(--margin-heading-4);
    }

    .display-lg-5 {
        font-family: var(--font-family-headings), sans-serif;
        letter-spacing: var(--font-letter-spacing-heading);
        font-size: var(--text-heading-5);
        line-height: var(--font-line-height-heading-5);
        margin-bottom: var(--margin-heading-5);
    }
}